<template>
    <div>
        <div class="van-swipe-box b-g-f">
            <van-swipe :autoplay="3000" indicator-color="#5ca1ee">
                <van-swipe-item v-for="(item,index) in detail.photos" :key="index">
                    <img :src="item" alt="" srcset="">
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="title-money b-g-f">
            <span class="detail-title">{{detail.name}}</span>
            <span class="detail-money">￥{{detail.price}}</span>
        </div>
        <div class="b-g-f clearfix detail-content" v-html="detail.content"></div>
        <div class="detail-gwc-fixl">
            <van-goods-action>
                <van-goods-action-mini-btn :info="infoNum" icon="cart-o" text="购物车" @click="gwclink()"/>
                <van-goods-action-big-btn text="加入购物车" @click="cartAdd()" />
                <van-goods-action-big-btn primary text="立即购买" @click="order()"/>
            </van-goods-action>
        </div>
        
    </div>
</template>
<script>
import { Toast } from 'vant'
export default {
    data(){
        return{
            detail:{},
            infoNum:0
        }     
    },
    components:{},
    mounted(){
        this.goodsDetail()
        this.cartgetCartProNum()
    },
    methods:{
        // 商品详情
        goodsDetail(){
            this.$api.shopping.goodsDetail({id:this.$route.params.id}).then(resp=>{
                if(resp.code == 1){
                    this.detail = resp.data
                }else{
                    Toast(resp.msg)
                }
            })
        },
        // 购物车中商品总数量
        cartgetCartProNum(){
            this.$api.shopping.cartgetCartProNum().then(resp=>{
                if(resp.code == 1){
                    this.infoNum = resp.data.total_num
                }
            })
        },
        // 加入购物车
        cartAdd(){
            this.$api.shopping.cartAdd({goods_id:this.$route.params.id,num:1}).then(resp=>{
                if(resp.code == 1){
                    Toast('加入购物车成功')
                    this.cartgetCartProNum()
                }else{
                    Toast(resp.msg)
                }
            })
        },
        // 立即购买
        order(){
            this.$router.push({
                name:'pay',
                query:{
                    total_amount:parseFloat(this.detail.price),
                    cart_ids:this.detail.id.toString(),
                    from:'detail'
                }
            })
        },
        gwclink(){
            this.$router.push({
                name:'shoppingCart',
            })
        }
    }
}
</script>
<style lang="less" scoped>
.title-money{
    padding: 30px 30px 20px;
    border-top:solid 1px #f5f5f5;
    border-bottom:solid 20px #f5f5f5;
    .detail-money{
        padding-top: 10px;
        display: block;
        color: #D90004;
        height: 60px;
        line-height: 60px;
        font-size: 40px;
        font-weight: bold;
    }
        
}
.detail-content{
    padding: 20px;
    margin-bottom: 160px;
}
.detail-gwc-fixl{
    .van-goods-action{
        .van-goods-action-mini-btn{
            height: 130px;
            min-width: 26%;
            font-size: 26px;
            .van-goods-action-mini-btn__icon{
                width: 80px;
                font-size: 60px;
                .van-info{
                    min-width: 30px;
                    min-height: 29px;
                    line-height: 35px;
                    right:15px;
                    overflow: hidden;
                    font-size: 20px;
                }
            }
        }
        .van-button--large{
            height: 130px;
            font-size: 38px;
        }
        .van-button--warning{
            background-color: #ff9c35;
        }
        .van-button--danger{
            background-color: #D90004;
        }
    }
}
</style>

